<template>
    <div class="hezhi">
        
      <div class="hezhi2">
          <h1 align="center">填 写 企 业 基 本 信 息</h1>
      <div class="hezhi3">
        <el-form 
                    ref="form" 
                    :model="form" 
                    :rules="rules" 
                    label-width="auto" 
                    class="fff">
               <el-row class="rowo">
          <el-col >
              <el-form-item label="企业名称：" prop="bcbh">
              <el-input v-model="form.bcbh" placeholder="请输入班次编号" />
            </el-form-item>
          </el-col>
          <el-col>
              <el-form-item label="企业简称：" prop="bcbh">
              <el-input v-model="form.bcbh" placeholder="请输入班次编号" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row >
          <el-col span="12">
              <el-form-item label="工商注册号/社会统一信用代码："  prop="bcbh" label-widt="80px">
              <el-input v-model="form.bcbh" placeholder="工商注册号/社会统一信用代码" />
            </el-form-item>
          </el-col>
           <el-col span="7">
              <el-form-item label="证照有效期：" prop="bcbh">
                <el-date-picker
                    v-model="value2"
                    type="date"
                    placeholder="选择日期"
                    format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM-dd">
                </el-date-picker>
                </el-form-item>
          </el-col>

        </el-row>
        <el-row class="rowo">
         <el-col >
              <el-form-item label="联系人：" prop="bcbh">
              <el-input v-model="form.bcbh" placeholder="请输入联系人" />
            </el-form-item>
          </el-col>
          <el-col >
              <el-form-item label="联系方式：" prop="bcbh">
              <el-input v-model="form.bcbh" placeholder="请输入联系方式" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row class="rowo">
          <el-col >
              <el-form-item label="经营类型：" prop="bcbh">
              <el-input v-model="form.bcbh" placeholder="请输入经营类型" />
            </el-form-item>
          </el-col>
          <el-col >
              <el-form-item label="法人代表：" prop="bcbh">
              <el-input v-model="form.bcbh" placeholder="请输入法人代表" />
            </el-form-item>
          </el-col>
        </el-row>

         <el-row class="rowo">
          <el-col >
              <el-form-item label="经营者性质：" prop="bcbh">
              <el-input v-model="form.bcbh" placeholder="请输入经营者性质" />
            </el-form-item>
          </el-col>
          <el-col >
              <el-form-item label="菜类商务部备案码：" prop="bcbh">
              <el-input v-model="form.bcbh" placeholder="请输菜类商务部备案码" />
          </el-form-item>
          </el-col>
        </el-row>

        <el-row class="rowo">
          <el-col >
              <el-form-item label="备案日期：" prop="bcbh">
              <el-date-picker
                    v-model="value2"
                    type="date"
                    placeholder="选择日期"
                    format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM-dd">
                </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col >
              <el-form-item label="肉类商务部备案编码：" prop="bcbh">
              <el-input v-model="form.bcbh" placeholder="请输肉类商务部备案编码" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row class="rowo">
          <el-col >
              <el-form-item label="绑定企业二维码" prop="bcbh">
             <el-input v-model="form.bcbh" placeholder="请输入二维码编号" />
            </el-form-item>
          </el-col>
          <el-col >
            <el-form-item label="展示模板：" prop="bcbh">
              <el-input v-model="form.bcbh" placeholder="请输入模板" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row >
          <el-col span="15">
              <el-form-item label="门店编号：" prop="bcbh">
             <el-input v-model="form.bcbh" placeholder="请输入门店编号：" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="roo">
                 <el-form-item
                 label="公司地址："
                 ><el-input v-model="form.address" placeholder="请输入公司地址" style="width:500px"></el-input>
                 </el-form-item>
                 <el-button type="info" plain style="height:40px" @click="OpenMap">地图</el-button>
        </el-row>
        <h2 align="center"></h2>
        <el-divider>企业图片资料</el-divider>
            <div class="aaa">
           <div >
               <h3 align="center">
                 企业图片
               </h3>
               <el-upload
                action="https://jsonplaceholder.typicode.com/posts/"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove">
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
              </el-dialog>
           </div>
               <div >
               <h3 align="center">
                 企业微信公众号
               </h3>
               <el-upload
                action="https://jsonplaceholder.typicode.com/posts/"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove">
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
              </el-dialog>
                 </div>
               <div >
               <h3 align="center">
                 H5首页展示图片
               </h3>
                <el-upload
              action="https://jsonplaceholder.typicode.com/posts/"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
           </div>
              
        </div>
        <el-divider>企业其他证照</el-divider>
            <div class="aaa">
           <div >
               <h3 align="center">
                 食品经营许可证
               </h3>
               <el-upload
                action="https://jsonplaceholder.typicode.com/posts/"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove">
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
              </el-dialog>
           </div>
               <div >
               <h3 align="center">
                 企业生产许可证
               </h3>
               <el-upload
                action="https://jsonplaceholder.typicode.com/posts/"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove">
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
              </el-dialog>
                 </div>
               <div >
               <h3 align="center">
                 食品流通许可证
               </h3>
                <el-upload
              action="https://jsonplaceholder.typicode.com/posts/"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
           </div> 
           <div >
               <h3 align="center">
                 餐饮服务许可证
               </h3>
                <el-upload
              action="https://jsonplaceholder.typicode.com/posts/"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
           </div> 
        </div>
        <el-divider>企业认证</el-divider>
        <div >
            <el-upload
              action="https://jsonplaceholder.typicode.com/posts/"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
           </div> 
           <el-divider>公司简介</el-divider>
           <div>
             <el-input
                type="textarea"
                placeholder="请输入内容"
                v-model="textarea"
                maxlength="1000"
                show-word-limit
                rows="10"
              >
              </el-input>
           </div>
           <div style="margin: 40px 0;"></div>
            <div class="button">
              <el-button type="primary" @click="Createdcomplay">立即创建</el-button>
            </div>
       </el-form>
      </div>
    </div>
    <Map
    :stationcard="show"
    @closed="closed"
    >
    </Map>


  </div>
</template>
<script>
import Map from "./Map"
import chinaArea from "china-area-data"
export default {
    data(){
        return{
            address:"",
            show:false,
            form:{
              address:"",
            },
        }
    },
    methods:{
      Createdcomplay(){
        this.$router.push("/BasicInfomation/BreedingBase");
      },
      OpenMap(){
        this.show = true
      },
        closed(address){
          this.show = false
          this.form.address = address
        }
    },
    components:{
    Map,
    },
}
</script>
<style lang="scss" scoped>
.hezhi{
//    height: 100%;  
    width: 100%;
    display: flex;
   justify-content: center;
   margin: auto;
    padding: 10px 0;
    background-color: rgba(240, 240, 240, 0.808);
}
.hezhi2{
    width: 80%;
    height: 100%;
    padding: 20px 60px;
    background-color: rgb(255, 255, 255);
}
h1{
     padding: 20px 0 20px 0;
    font-size: 30px;
}
.hezhi3{
    width: 100%;
    border:3px solid rgb(211, 211, 211);
    padding: 30px 0px 0 0;
    border-radius:10px;
    display: flex;
   justify-content: center;
}
.rowo{
    display: flex;
  justify-content: space-between;
}
.roo{
    display: flex;
  justify-content: flex-start ;
}
  .aaa{
  display: flex;
  justify-content: space-between;
  margin: 20px;
  }
  .button{
     display: flex;
  justify-content: center;
  margin: 20px;
  }
</style>